<template>
  <div style="margin: auto"><h1>采购入库</h1></div>
  <div>
    供应商
    <el-select v-model="buyer.supplierId" placeholder="请选择" style="margin-top: 20px">
      <el-option
          v-for="item in options"
          :key="item.id"
          :label="item.name"
          :value="item.id"
          @click="this.buyer.supplierId=item.id"
      >
      </el-option>
    </el-select>
    <span style="margin-left: 100px">采购人:{{ this.loginUser.name }}</span>
  </div>
  <el-table
      :data="shop"
      height="250"
      border
      style="width: 100%;margin-top: 200px">
    <el-table-column
        prop="product.name"
        label="商品名称名称"
        width="300">
    </el-table-column>
    <el-table-column
        prop="product.brand"
        label="品牌"
        width="200">
    </el-table-column>
    <el-table-column
        prop="buyMoney"
        label="采购价"
        width="150">
    </el-table-column>
    <el-table-column
        prop="num"
        label="采购数量"
        width="150">
    </el-table-column>
    <el-table-column
        label="操作"
        width="200">
      <template #default="scope">
        <el-button type="primary" size="small" @click="del(scope.row.id)">移除商品</el-button>
      </template>
    </el-table-column>
  </el-table>

  <el-button type="primary" @click="this.findVisible=true" style="margin-top: 60px;margin-left: 50px;size: 20px">添加商品
  </el-button>
  <el-button type="primary" @click="addGoods" style="margin-top: 60px;margin-left: 500px;size: 20px">入库</el-button>

  <el-dialog
      v-model="findVisible"
      title="添加采购商品"
      width="60%"
      center>
    <div style="margin-left: 100px;margin-top: 50px">
      商品编号：<input type="text" v-model="number.id" @blur="findById(number.number)"><br>
      商品名称：<input type="text" v-model="goods.name" :disabled="dd"><br>
      品牌：<input type="text" v-model="goods.brand" :disabled="dd"><br>
      类别：<input type="text" v-model="goods.type" :disabled="dd"><br>
      采购价：<input type="text" v-model="goods.buyMoney"><br>
    </div>
    <div style="margin-left: 100px;margin-top: 50px">
      <!--      <img :src="'/project/emFace/'+goods.img" id="faceImg" width="200" height="200"><br>-->
      <!--      商品图片：<input type="file" ref="faceFile" id="file" style="margin-left: 50px" @change="changeFace"-->
      <!--                  :disabled="dd"><br>-->
      采购数量:<input type="text" v-model="goods.num"><br></div>
    <el-button type="primary" @click="add" style="margin-top: 30px;margin-left: 50px;size: 20px">确定</el-button>
  </el-dialog>

  <el-dialog
      v-model="addDiv"
      title=""
      width="20%"
      center>
    <h3>添加成功</h3>
    <el-button type="primary" @click="this.addDiv=false" style="margin-top: 30px;margin-left: 100px;size: 20px">确定
    </el-button>
  </el-dialog>
</template>
<script>
import axios from "axios";
import Index from "@/index";

export default {
  components: {Index},
  data() {
    return {
      shop: [],
      findObj: {},
      options: [],
      loginUser: {},
      buyer: {},
      addObj: {},
      goods: {},
      findVisible: false,
      dd: false,
      number: {},
      addDiv: false,
    }
  },
  methods: {

    findByUserId(userId) {
      axios.get("/project/buyerCar/findByUserId", {
        params: {
          userId
        }
      }).then(resp => {
        this.shop = resp.data;
        console.log(this.shop);
      })
    },
    getLoginUser() {
      axios.get("/project/user/getLoginUser").then(resp => {
        this.loginUser = resp.data;
      })
    },
    findAll() {
      axios.get("/project/supplier/findAll").then(resp => {
        this.options = resp.data;
      })
    },
    del(id) {
      axios.get("/project/buyerCar/del", {params: {buyCarId: id}}).then(resp => {
        if (resp.data == "ok") {
          this.findByUserId(this.loginUser.id);
        }
      })
    },
    findById() {
      axios.get("/project/product/findById", {
        params:
        this.number
      }).then(resp => {
        if (resp.data.name == null) {
          this.addObj.option = "add";
          this.dd = false;
        } else {
          this.dd = true;
          this.addObj.option = "ad";
        }
        this.product = resp.data;
        console.log(this.product);
      })
    },
    add() {
      // this.product.id = this.number.number;
      // this.addObj.num = this.product.num;
      console.log(this.product.id);
      axios.get("/project/buyerCar/add", {
        params: {
          option: this.addObj.option,
          product: this.product,
          id: this.product.id,
          name: this.product.name,
          brand: this.product.brand,
          type: this.product.type,
          buyMoney: this.goods.buyMoney,
          sellMoney: 0,
          num: this.goods.num,
          img: this.product.img,
          nums: this.addObj.num,
          userId: this.loginUser.id
        }
      }).then(resp => {
            if (resp.data == "ok") {
              this.findVisible = false;
              this.findByUserId(this.loginUser.id);
            }
          }
      );
    },

    addGoods() {
      this.buyer.user = this.loginUser.name;
      console.log(this.buyer);
      axios.get("/project/buyer/add", {params: this.buyer}).then(resp => {
        if (resp.data == "ok") {
          this.findByUserId(this.loginUser.id);
          this.addDiv = true;
        }
      })
    },
    async changeFace() {
      var reader = new FileReader();//定义文件读取流
      reader.readAsDataURL(document.getElementById("file").files[0]);
      reader.onload = function (ev) {
        document.getElementById("faceImg").src = ev.target.result;
      }

      //向服务器发送请求，完成添加
      var emObj = new FormData();
      emObj.append("uploadImg", this.$refs.faceFile.files[0]);
      //上传文件请求头
      let config = {
        headers: {'Content-Type': 'multipart/form-data'}
      }

      //接收服务器发送给客户端的上传文件名
      var face = "";
      await axios.post("/project/upload", emObj, config).then(resp => {
        face = resp.data;
      });

      //将上传文件名，添加到addObj对象中
      this.goods.img = face;
    }
  },
  created() {
    this.getLoginUser();
    this.findByUserId(this.loginUser.id);
    this.findAll();
  },

}
</script>

<style scoped>


</style>